import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Avatar } from "antd";
import { useUserInfo } from "@/store/userStore";
import { useSettings } from "@/store/settingStore";
import { useThemeToken } from "@/theme/hooks";
import { cn } from "@/utils";


import { HEADER_HEIGHT } from "../config";

import { ThemeLayout } from "@/type/enum";

type Props = {
	collapsed: boolean;
	onToggle: () => void;
};

export default function NavUserInfo({ collapsed, onToggle }: Props) {
	const { themeLayout } = useSettings();
	const { username,avatar} = useUserInfo(); // Get user data from your store
	const {
		colorPrimary,
		colorTextSecondary,
		colorBgContainer,
		colorBorderSecondary,
	} = useThemeToken();

	return (<div
			style={{ height: `${HEADER_HEIGHT}px` }}
			className="relative flex items-center justify-center py-4"
		>
			<div className="flex items-center gap-2">
				<Avatar
					src={avatar}
					size="small"
					style={{ backgroundColor: colorPrimary }}
				>
					{username?.charAt(0).toUpperCase()}
				</Avatar>
				{themeLayout !== ThemeLayout.Mini && (
					<span
						className="text-sm font-medium"
						style={{ color: colorTextSecondary }}
					>
            {username}
          </span>
				)}
			</div>
			<div
				onClick={onToggle}
				onKeyDown={onToggle}
				className={cn(
					"absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none items-center justify-center rounded-full text-center md:flex",
				)}
				style={{
					fontSize: 16,
					border: `1px solid ${colorBorderSecondary}`,
					backgroundColor: colorBgContainer,
				}}
			>
				{collapsed ? (
					<RightOutlined style={{ fontSize: 12, color: colorTextSecondary }} />
				) : (
					<LeftOutlined style={{ fontSize: 12, color: colorTextSecondary }} />
				)}
			</div>
		</div>
	);
}
